<template>
  <div class="header">
    <van-nav-bar :title="title" :left-text="leftText" :rightText="rightText"
                 v-bind="{leftArrow, zIndex, fixed, border}"
                  @click-left="clickLeft"
                  @click-right="clickRight">
      <!-- 自定义左侧区域内容 -->
      <template #left>
        <slot name="left"/>
      </template>
      <!-- 自定义右侧区域内容 -->
      <template #right>
        <slot name="right"/>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
  export default {
    props: {
      title: {type: String, default: ''},             // 标题
      leftText: {type: String, default: ''},          // 左侧文案
      rightText: {type: String, default: ''},         // 右侧文案
      leftArrow: {type: Boolean, default: false},     // 是否显示左侧箭头
      border: {type: Boolean, default: false},        // 是否显示下边框
      fixed: {type: Boolean, default: false},         // 是否固定在顶部
      zIndex: {type: Number, default: 1},             // 导航栏 z-index
      clickLeft: {type: Function, default: ()=> {}},  // 左侧按钮方法
      clickRight: {type: Function, default: ()=> {}}, // 右侧按钮方法
    },
    data() {
      return {

      }
    },
    methods: {

    },
  }
</script>

<style lang="less" scoped>
  /* 头部区域 */
  .header {
    width: 100%;
    height: 128px;
    padding-top: 29px;
    /* 导航栏区域 */
    /deep/ .van-nav-bar {
      background-color: transparent;
      width: 100%;
      height: 100%;
      // 导航栏内容区域
      .van-nav-bar__content {
        height: 100%;
        /* 标题 */
        .van-nav-bar__title {
          font-size: 36px;
        }
        /*  右侧文本  */
        .van-nav-bar__right {
          font-size: 30px;
        }
      }
    }
  }
</style>
